<template>
  <div id="box">
      <div class="login-container">
          <h2 style="font-size: 30px;">会议室预定系统</h2>
          <h2 style="font-size: 20px;">员工登录</h2>
          <el-input class="input-class"  v-model="username" placeholder="请输入用户名" clearable @keyup.enter="login">
              <template #prefix>
                  <!-- 这里使用 img 标签插入图片，需要根据实际情况修改图片路径 -->
                  <img src="../img/user.png" alt="图标" style="width: 20px; height: 20px; margin-right: 5px;">
               </template>
          </el-input>
          <el-input class="input-class" v-model="password" type="password" placeholder="请输入密码" show-password clearable @keyup.enter="login">
              <template #prefix>
                  <!-- 这里使用 img 标签插入图片，需要根据实际情况修改图片路径 -->
                  <img src="../img/pwd.png" alt="图标" style="width: 20px; height: 20px; margin-right: 5px;">
               </template>
          </el-input>
          <div class="captcha-container">
              <el-input class="input-class1"  v-model="captchaInput" placeholder="请输入验证码" clearable @keyup.enter="login"/>
              <canvas class="c1" ref="captchaCanvas" width="115" height="30" @click="generateCaptcha" ></canvas>
          </div>
          <el-button class="button-class" type="primary" @click="login" plain >登录</el-button>
          <!-- <el-button class="button-class1" type="primary" @click="register"  plain >注册</el-button> -->
          <div class="container-a">
              <!-- <a class="link-class" type="primary" @click="register">注册</a> -->
              <!-- <el-divider direction="vertical" style="margin-top: 5px;"  />
              <a class="link-class" type="primary" @click="getpassword">找回密码</a> -->
          </div>
      </div>
  </div>
</template>

<script>
// import { th } from 'element-plus/es/locale';
import axios from "axios";
export default {
  name:"LoginPage",
  data(){
      return{
          username:"",
          password:"",
          captchaCode: '',
          captchaInput: '',
      }
  },
  methods:{
      login(){
          const params={
              "username": this.username,
              "password":this.password
          
          }
          //发送请求 http://localhost:80/login
          axios.post("/staff/login",params).then(res=>{
              console.log(JSON.stringify(res));
              //检查返回发对象中登录是否成功
              //成功跳转姐界面
              //失败提示错误信息
              if(res.data.code===200){
                  console.log(res.data.data.token)
                  localStorage.setItem("token",res.data.data.token);
                  if(this.captchaInput==null || this.captchaInput.toLocaleLowerCase() !== this.captchaCode.toLocaleLowerCase()){
                      this.$message.error("验证码错误！");
                      return;
                  }
                  // this.$router.push({
                  //   path:,
                  //   query: {
                  //     username:this.username
                  //   }
                  // });
                  localStorage.setItem('username', this.username);
                  this.$router.push("/staffpage")
                  return;
              }
              this.$message.error(res.data.msg||"登录失败");
          }).catch(err=>{
              console.log(JSON.stringify(err))
          })
          //发起请求，检查用户和密码是否正确
          //this.$router.push("/index")
      },
      register(){
          this.$router.push("/staffregister");
      },
      getpassword(){
          this.$router.push("/getpassword");
      },
      generateCaptcha() {
          const canvas = this.$refs.captchaCanvas;
          const ctx = canvas.getContext('2d');
          ctx.fillStyle = this.getRandomColor();
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.font = '30px Arial';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          const code = this.generateRandomCode();
          this.captchaCode = code;
          ctx.fillStyle = this.getRandomColor();
          ctx.fillText(code, canvas.width / 2, canvas.height / 2);
          this.drawRandomLines(ctx, canvas.width, canvas.height);
      },
      generateRandomCode() {
          const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
          let code = '';
          for (let i = 0; i < 4; i++) {
          code += chars.charAt(Math.floor(Math.random() * chars.length));
          }
          return code;
      },
      getRandomColor() {
       const r = Math.floor(Math.random() * 256);
       const g = Math.floor(Math.random() * 256);
       const b = Math.floor(Math.random() * 256);
       return `rgb(${r}, ${g}, ${b})`;
      },
      drawRandomLines(ctx, width, height) {
          for (let i = 0; i < 5; i++) {
          ctx.beginPath();
          ctx.moveTo(Math.random() * width, Math.random() * height);
          ctx.lineTo(Math.random() * width, Math.random() * height);
          ctx.strokeStyle = this.getRandomColor();
          ctx.lineWidth = 1;
          ctx.stroke();
          }
      },
  },
  mounted(){
      this.generateCaptcha();
  }
}

</script>
<style scoped>
#box{
  background: url("../img/loginBackground.png");
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  /* z-index:-10; */
  /* zoom: 1; */
  background-color: #3c2222;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: 100% 100%;
  background-position: center 0;

}
.login-container {
  width: 400px;
  height: 400px;
  background-color: #5b6061;
  padding: 40px;
  border-radius: 30px;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.captcha-container {
  width: 100%;
  /* text-align: center; */
  display: flex;
    justify-content: center;
    margin-top: 20px;
}
.input-class {
  border-radius: 10px;
  margin-top: 20px;
  width: 300px;
  height: 40px;
  color: #eae5e594;
  border-radius: 10px;
}
.input-class1 {
  border-radius: 10px;
  width: 150px;
  height: 40px;
  color: #eae5e594;
}
.c1 {
  margin-top: 0px;
  margin-left: 32px;
}
.button-class {
  width: 300px;
  height: 45px;
  margin-top: 35px;
  border-radius: 40px;
  font-size: 16px;
}
.button-class1 {
 padding:0px;
 width: 300px;
 margin-top: 20px;
 border-radius: 20px;
}
.container-a {
  display: flex; /* 启用 Flexbox 布局 */
  justify-content: center; /* 让容器中的元素水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 20px; /* 控制组件之间的间距 */
  width: 100%;
}
canvas {
  border: 1px solid #ccc;
  margin-top: 20px;
}
.link-class {
  left: 0px;
  margin-top: 5px;
  color: #3c3a3a;
  text-decoration: none;
}
.link-class:hover {
  color:#ffffff ;
  text-decoration: underline;
  cursor: pointer;
}
</style>